<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">	
			<!--<a class="mui-action-back mui-pull-left back"></a>-->
			<!--<input type="image" src="../images/search01.png" id ="searchzd" class="mui-icon-search"  style="color: #999;height: 48px;width:48px; position: relative; float: right; z-index: 20;" value="搜"/>-->
			<h1 class="mui-title " style="float: left; text-align: left; margin-left: -30px; border: solid red 0px;">食药全通</h1>
			<a class="mui-icon mui-icon-search mui-pull-right" id="btnSearch"></a>
		</header>
		<div class="mui-content">
			<div id="home" class="mui-control-content mui-active">
				<div id="slider" class="mui-slider">
					<div class="mui-slider-group mui-slider-loop">
						<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#">
								<img src="images/silder/si2.png">
							</a>
						</div>
						<!-- 第一张 -->
						<div class="mui-slider-item">
							<a href="#">
								<img src="images/silder/si1.png">
							</a>
						</div>
						<!-- 第二张 -->
						<div class="mui-slider-item">
							<a href="#">
								<img src="images/silder/si2.png">
							</a>
						</div>
						<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#">
								<img src="images/silder/si1.png">
							</a>
						</div>
					</div>
					<div class="mui-slider-indicator">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator"></div>
	
					</div>
				</div>
				<div class="mui-input-group">
					 <ul class="mui-table-view mui-grid-view mui-grid-9" style="background-color: white;">
					 	<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
			            	<a href="#" id="btnDocument">
			                    <span class="mui-icon mui-icon-list"></span>
			                    <div class="mui-media-body">学习</div>
			            	</a>
			            </li>
			            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
			            	<a href="#" id="btnPractice">
			                    <span class="mui-icon mui-icon-bars"></span>
			                    <div class="mui-media-body">练习</div>
			            	</a>
			            </li>
			            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
			            	<a href="#" id="btnSimulate">
			                    <span class="mui-icon mui-icon-email"></span>
			                    <div class="mui-media-body">模拟考</div>
			            	</a>
			            </li>
			            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
			            	<a href="#" id="btnSimulate">
			                    <span class="mui-icon mui-icon-email"></span>
			                    <div class="mui-media-body">成绩榜</div>
			            	</a>
			            </li>
			        </ul>
				</div>
				<div class="mui-input-group" style="margin-top: 10px;">
					<div class="mui-table">
						<div class="mui-table-cell mui-col-xs-6" style="border: solid red 0px; ">
		                    <h4 class="mui-ellipsis" style="padding-left: 10px; padding-top: 5px;height: 32px;">学习记录</h4>
		                </div>
		                <div class="mui-table-cell mui-col-xs-6" v-on:click="openWindow('myFile','pages/myFile.html')">
		                	<a class="mui-icon mui-icon-more mui-pull-right" style="margin-right: 10px;" ></a>
		                </div>
					</div>
					<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed" v-for="item in readDocs">
						<!--<li class="mui-table-view-cell">
				            <div class="mui-table">
				                <div class="mui-table-cell mui-col-xs-12 mui-navigate-right" style="border: solid red 0px; ">
				                    <h5 class="mui-ellipsis-2" style="padding-top: 5px;">2019年5月份行政处罚案件信息公开</h5>
				                </div>
				            </div>
				        </li>-->
				        <li class="mui-table-view-cell">
				            <div class="mui-table">
				                <div class="mui-table-cell mui-col-xs-12 mui-navigate-right" style="border: solid red 0px; " v-on:click="openFile(item.Id)">
				                    <h5 class="mui-ellipsis-2" style="padding-top: 5px;" v-html="item.Title">2019年5月份行政处罚案件信息公开</h5>
				                </div>
				            </div>
				        </li>
				        
				    </ul>
				    
				</div>
				<div class="mui-input-group" style="margin-top: 10px;">
					<div class="mui-table">
						<div class="mui-table-cell mui-col-xs-6" style="border: solid red 0px; ">
		                    <h4 class="mui-ellipsis" style="padding-left: 10px; padding-top: 5px;height: 32px;">通知公告</h4>
		                </div>
		                <div class="mui-table-cell mui-col-xs-6">
		                	<a class="mui-icon mui-icon-more mui-pull-right" style="margin-right: 10px;" ></a>
		                </div>
					</div>
					<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
				        <li class="mui-table-view-cell">
				            <div class="mui-table">
				                <div class="mui-table-cell mui-col-xs-12 mui-navigate-right" style="border: solid red 0px; ">
				                    <h5 class="mui-ellipsis-2" style="padding-top: 5px;">2019年5月份行政处罚案件信息公开</h5>
				                    <p class="mui-h6 mui-ellipsis">[2019-05-20]</p>
				                </div>
				            </div>
				        </li>
				        <li class="mui-table-view-cell">
				            <div class="mui-table">
				                <div class="mui-table-cell mui-col-xs-12 mui-navigate-right" style="border: solid red 0px; ">
				                    <h5 class="mui-ellipsis-2" style="padding-top: 5px;">2019年5月份行政处罚案件信息公开</h5>
				                    <p class="mui-h6 mui-ellipsis">[2019-05-20]</p>
				                </div>
				            </div>
				        </li>
				    </ul>
				    
				</div>
				<div class="mui-row">
					&nbsp;
				</div>
			</div>
			<div id="myself" class="mui-control-content">
				<div class="mui-row">&nbsp;</div>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							新消息通知
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							隐私
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							通用
						</a>
					</li>
				</ul>
				<ul class="mui-table-view" style="margin-top: 25px;">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" id="btnAbout">
							关于
						</a>
					</li>
				</ul>
				<ul class="mui-table-view" style="margin-top: 25px;">
					<li class="mui-table-view-cell">
						<a style="text-align: center;color: #FF3B30;" id="btnExit">
							退出
						</a>
					</li>
				</ul>
			</div>
			<div class="mui-row" style="height: 50px;">
				&nbsp;
			</div>
		</div>
		<nav class="mui-bar mui-bar-tab">
	        <a href="#home" class="mui-tab-item mui-active" id="defaultTab">
	            <span class="mui-icon mui-icon-home"></span>
	            <span class="mui-tab-label">首页</span>
	        </a>
	        <a href="#myself" class="mui-tab-item" >
	            <span class="mui-icon mui-icon-contact"></span>
	            <span class="mui-tab-label">我的</span>
	        </a>
	    </nav>
		<script src="js/mui.min.js"></script>
		<script src="js/vue.min.js"></script>
		<script type="text/javascript" src="js/app.js" ></script>
		<script type="text/javascript">
			mui.init();
			
			var vm = new Vue({
				el: '.mui-content',
				data: {
					readDocs:[],
				}
			});
			mui.plusReady(function(){
				
				plus.navigator.setStatusBarBackground('#FFFFFF');
        		plus.navigator.setStatusBarStyle('dark');
        		
				/*读取用户阅读记录*/
				loadFile();
//				setInterval(function(){
//					loadFile();
//				},60000);
					
				
				var btnSearch = document.getElementById("btnSearch");
				btnSearch.addEventListener('tap', function(event) {  
					openWindow("search","pages/search.html");
				});
				
				var btnDocument = document.getElementById("btnDocument");
				btnDocument.addEventListener('tap', function(event) {  
					openWindow("fileIndex","pages/fileIndex.html?v=" + parseInt(Math.random()*1000000000));
				});
				
				var btnPractice = document.getElementById("btnPractice");
				btnPractice.addEventListener('tap', function(event) {  
					openWindow("practice","pages/practiceIndex.html?v=" + parseInt(Math.random()*1000000000));
				});
				
				var btnSimulate = document.getElementById("btnSimulate");
				btnSimulate.addEventListener('tap', function(event) {  
					openWindow("simulate","pages/simulateIndex.html?v=" + parseInt(Math.random()*1000000000));
				});
				
				var btnAbout = document.getElementById("btnAbout");
				btnAbout.addEventListener('tap', function(event) {  
					openWindow("about","pages/about.html");
				});
				
				var btnExit = document.getElementById("btnExit");
				btnExit.addEventListener('tap', function(event) {
					
					plus.runtime.quit();
				});
			});
			
			function loadFile(){
				/*读取用户阅读记录*/
				vm.readDocs = [];
				var docs = app.getDocuments();
				console.log(JSON.stringify(docs));
				if(docs.ReadDocs != undefined){
					console.log(JSON.stringify(docs.ReadDocs));
					vm.readDocs = docs.ReadDocs.splice(0,10);
				}
			}
			
			function openWindow(id,url){
				mui.openWindow({
					id:id,
					url:url,
					show:{aniShow: 'pop-in'},
					extras: {condition: ""},
					waiting: {autoShow: false, /*自动显示等待框，默认为true*/}
				});
			}
			
			function openFile(id){
				mui.openWindow({
					id:"fileInfo",
					url:"pages/fileInfo.html",
					show:{aniShow: 'pop-in'},
					extras: {keyValue: id},
					waiting: {autoShow: false, /*自动显示等待框，默认为true*/}
				});
			}
			
			function openChapter(item){
				/*重新读取用户阅读信息，否则返回时，需要刷新已读取的内容*/
				var doc = app.getDocument(item.Id);
				
				mui.openWindow({
					id:"chapterInfo",
					url:"pages/chapterInfo.html",
					show:{aniShow: 'pop-in'},
					extras: {refContentId: doc.Id,readIndex:doc.ReadIndex},
					waiting: {autoShow: true, /*自动显示等待框，默认为true*/}
				});
			}
		</script>
	</body>

</html>
